<!--  -->
<template>
  <div class="custom-css-making-form">
    <fm-making-form ref="makingform"
                    class="making-form"
                    :basic-fields="['input', 'textarea', 'number', 'radio', 'checkbox', 'time', 'date', 'rate', 'color', 'select', 'switch', 'slider', 'text']"
                    :advance-fields="['blank', 'imgupload', 'editor', 'cascader']"
                    :layout-fields="['grid']"
                    preview
                    clearable
                    upload
                    generate-code
                    generate-json>
      <template slot="action">
        <el-button type="text"
                    icon="el-icon-upload"
                    @click="saveFormJson">Submit</el-button>
        <el-button type="text"
                    icon="el-icon-upload"
                    @click="getData">getData</el-button>
      </template>
    </fm-making-form>
  </div>
</template>

<script>
import { getUUID } from '@/utils'

export default {
  data () {
    return {
      // dataList: [],
      dataInfo: {
        id: '',
        name: '',
        businessId: getUUID(),
        businessType: 'test',
        language: 'json', // sql,grovvy,json
        type: 1,
        data: ''
      }
    }
  },
  created () {
  },
  methods: {
    getData () {

    },
    saveFormJson () {
      const params = {
        ...this.dataInfo,
        name: 'forms-designer',
        data: this.$refs.makingform.getJSON()
      }
      const changeSysUser = () => {
        if (!this.dataInfo.id) {
          return this.$interface.reports.postReportDatasetApi(params)
        } else {
          return this.$interface.reports.putReportDatasetApi(this.dataInfo.id, params)
        }
      }
      changeSysUser()
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          this.$emit('updateForm')
        })
    }
  }
}
</script>

<style lang='scss'>
// .making-form {
//   min-height: calc(calc(100vh - 50px - 38px - 30px) - 2px);
//   display: block;
//   .el-container {
//     min-height: calc(calc(100vh - 50px - 38px - 30px) - 2px);
//     .el-main {
//       min-height: calc(calc(100vh - 50px - 38px - 30px) - 2px);
//       display: block;
//     }
//   }
// }
.custom-css-making-form {
  .fm-style .fm2-container .fm2-main {
    // min-height: calc(calc(100vh - 50px - 38px - 30px - 40px) - 2px);
    height: calc(100vh - 45px - 32px - 30px);
    display: block;
  }
  .fm-style .fm2-container footer {
    height: 1px !important;
    overflow: hidden;
  }
}
</style>
